<template>
  <div>
    <van-nav-bar title="首页" @click-right="onClickRight">
      <!-- 右侧插槽，用于自定义内容 -->
      <template #right>
        <div style="height: 100%; display: flex; align-items: center;">
          <img :src="currentUserAvatar" alt="个人中心" class="nav-bar-avatar"/>
        </div>
      </template>
    </van-nav-bar>

    <div class="search-and-sort">
      <van-search
          v-model="searchValue"
          placeholder="请输入搜索内容"
          @change="onSearch"
          class="search-box"
      />
      <van-dropdown-menu class="sort-dropdown">
        <van-dropdown-item v-model="sortValue" :options="sortOptions" />
      </van-dropdown-menu>
    </div>

    <div class="tags-scroll-container">
      <van-row type="flex" gutter="10">
        <van-col v-for="tag in tags" :key="tag.name" :span="6" @click="selectTag(tag)">
          <van-tag
              class="custom-tag"
              :type="tag.selected ? 'primary' : 'default'"
              :color="tag.selected ? 'blue' : '#f7f8fa'"
              :text-color="tag.selected ? 'white' : '#303133'"
          >{{ tag.name }}</van-tag>
        </van-col>
      </van-row>
    </div>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div v-for="(item, index) in list" :key="index" class="list-item" @click="goToDetail(item.id)">
        <van-cell>
          <template #title>
            <div class="list-item-header">
              <van-image :src="item.publisher.avatar" width="40" height="40" />
              <div class="list-item-content">
                <div class="username">{{ item.publisher.username }}</div>
              </div>
              <div class="list-item-title">
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
            <div class="list-item-body">
              <div class="info">{{ item.info }}</div>
              <div class="location">地点：{{ item.location }}</div>
              <div class="time">时间：{{ item.start_time }} - {{ item.end_time }}</div>
              <div class="participants">当前参与人数：{{ item.participants }}/{{ item.limit }}</div>
            </div>
          </template>
        </van-cell>
      </div>
    </van-list>

    <div class="floating-action-button" @click="goToCreateActivity">
      <span class="plus-icon">+</span>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      currentUserAvatar: '/avatars/avatar.jpg',
      searchValue: '',
      selectedCatId: 0, // 默认值为0，表示“全部”
      sortValue: 'default',
      sortOptions: [
        { text: '默认排序', value: 'default' },
        { text: '开始时间顺序', value: 'start_time_asc' },
        { text: '开始时间逆序', value: 'start_time_desc' },
        { text: '结束时间顺序', value: 'end_time_asc' },
        { text: '结束时间逆序', value: 'end_time_desc' }
      ],
      tags: [
        { name: '全部', catId: 0, selected: true },
        { name: '运动', catId: 1, selected: false },
        { name: '讲座', catId: 2, selected: false },
        // ...更多标签
      ],
      list: [
        {
          id: 1,
          publisher: {
            avatar: '/avatars/avatar.jpg',
            username: 'User1'
          },
          title: '环保讲座',
          info: '关于环境保护的公开讲座，邀请了多位环保领域的专家进行演讲。',
          location: '市图书馆报告厅',
          start_time: '2023-12-05 14:00',
          end_time: '2023-12-05 16:00',
          participants: 35,
          limit: 50
        },
        {
          id: 2,
          publisher: {
            avatar: '/avatars/avatar.jpg',
            username: 'User2'
          },
          title: '社区义卖活动',
          info: '社区组织的义卖活动，所得款项将用于支持本地慈善机构。',
          location: '社区中心广场',
          start_time: '2023-12-10 10:00',
          end_time: '2023-12-10 17:00',
          participants: 20,
          limit: 40
        },
        // 更多测试数据...
      ],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onClickRight() {
      // 当点击导航栏右侧按钮时，跳转到 /user 路径
      this.$router.push('/user');
    },

    goToCreateActivity() {
      // 这里是进入创建活动页面的逻辑
      this.$router.push('/act/edit');
    },

    onSearch() {
      this.$router.push({
        path: '/index',
        query: {
          key: this.searchValue,
          cat: this.selectedCatId // 使用选中的标签的catId
        }
      });
      this.resetList();
      this.onLoad();
    },
    resetList() {
      this.list = [];
      this.loading = false;
      this.finished = false;
    },

    async onLoad() {

    },

    // // 加载活动列表，需要与后端接口接通测试
    // async onLoad() {
    //   try {
    //     // 设置加载状态
    //     this.loading = true;
    //
    //     // 发送请求到后端接口
    //     const response = await axios.post('/api/must/act/search', {
    //       key: "",  // 示例中未提供搜索关键字
    //       catId: 0, // 示例中请求全部分区
    //       sort: "", // 示例中未指定排序方式
    //       desc: false, // 示例中按默认主键排序
    //       page: {
    //         page: this.page,
    //         size: this.size
    //       }
    //     });
    //
    //     // 检查响应
    //     if (response.data.ok && response.data.code === 0) {
    //       const responseData = response.data.data;
    //
    //       // 将响应数据添加到列表
    //       this.list.push(...responseData.list.map(item => {
    //         return {
    //           id: item.act.actId,
    //           publisher: {
    //             avatar: item.user.imgUrl,
    //             username: item.user.uname
    //           },
    //           title: item.act.title,
    //           info: item.act.info,
    //           location: item.act.place,
    //           start_time: item.act.startTime,
    //           end_time: item.act.endTime,
    //           participants: item.act.applyNum,
    //           limit: item.act.size
    //         };
    //       }));
    //
    //       // 更新分页信息
    //       if (responseData.page.size * (responseData.page.page + 1) >= this.list.length) {
    //         this.finished = true;
    //       } else {
    //         this.page++;
    //       }
    //     } else {
    //       throw new Error(response.data.msg || "Error fetching data");
    //     }
    //   } catch (error) {
    //     console.error(error);
    //     // 处理错误
    //   } finally {
    //     this.loading = false;
    //   }
    // },

    goToDetail(id) {
      // 跳转到活动详情页
      this.$router.push({ path: '/act/info', query: { actId: id } });
    },

    // // 获取分类列表，需要与后端接口接通测试
    // async fetchCategories() {
    //   try {
    //     const response = await axios.get('/api/no/cat/list');
    //     if (response.data.ok && response.data.code === 0) {
    //       this.tags = response.data.data.map(cat => ({
    //         name: cat.cat,
    //         selected: false
    //       }));
    //     } else {
    //       // Handle error (e.g., show a message)
    //     }
    //   } catch (error) {
    //     // Handle network or other errors
    //   }
    // },
    selectTag(selectedTag) {
      this.tags.forEach(tag => {
        tag.selected = (tag.name === selectedTag.name);
      });
      // 更新选中的catId
      this.selectedCatId = selectedTag.catId;
      // 当标签被选中时，根据选中的标签执行搜索
      this.onSearch();
    },
  },
  watch: {
    sortValue() {
      this.onSearch();
    },
  },
  // mounted() {
  //   this.fetchCategories();
  // },
};
</script>

<style>
.nav-bar-avatar {
  width: 35px; /* 或根据你的设计调整头像大小 */
  height: 35px;
  border-radius: 50%; /* 圆形图片 */
  object-fit: cover; /* 确保图片覆盖整个区域 */
}

.list-item-header {
  display: flex;
  align-items: center;
}

.list-item-content {
  margin-left: 10px;
}

.list-item-title {
  margin-left: 60px;
  font-size: 17px;     /* 增大字体大小 */
  color: #007bff;      /* 改变字体颜色，这里使用蓝色作为示例 */
  font-weight: bold;   /* 字体加粗 */
}

.list-item {
  border: 1px solid #d3d3d3;  /* 设置1像素宽、淡灰色的边框 */
}


.list-item-body .location {
  font-weight: bold; /* 字体加粗 */
}

.list-item-body .time {
  font-weight: bold; /* 字体加粗 */
}

.list-item-body .participants {
  color: #d7626d;  /* 黄色字体 */
  background-color: #f8f9fa;  /* 浅灰色背景 */
  padding: 2px 5px; /* 内边距 */
  border-radius: 5px; /* 边框圆角 */
}


.username {
  font-weight: bold;
}

.title {
  margin-top: 5px;
}

.info {
  margin-top: 10px;
  /* 限制行数显示 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.location, .time, .participants {
  margin-top: 5px;
}

:root {
  --van-nav-bar-height: 60px;
}

.search-and-sort {
  display: flex;
  align-items: center;
  padding: 0 10px; /* 根据实际情况调整内边距 */
}

.search-box {
  flex: 1; /* 搜索框占据剩余空间 */
}

.sort-dropdown {
  margin-left: 8px; /* 根据实际情况调整间距 */
}

.van-dropdown-menu__title {
   font-size: 14px; /* 文字大小 */
 }

.tags-scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 10px;
  background-color: #f8f8f8; /* 背景色 */
}

.custom-tag {
  border-radius: 14px; /* 圆角边框 */
  padding: 10px 20px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  margin-right: 8px; /* 与下一个标签的间距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border: none; /* 移除边框 */
  transition: all .3s ease; /* 过渡动画 */
}

.custom-tag.primary {
  background-color: #409eff; /* 选中状态的背景色 */
  color: white; /* 选中状态的文字颜色 */
}

.custom-tag.default {
  background-color: #f7f8fa; /* 默认状态的背景色 */
  color: #303133; /* 默认状态的文字颜色 */
}

/* 增加开始和结束的填充 */
.tags-scroll-container::before,
.tags-scroll-container::after {
  content: "";
  display: inline-block;
  width: 10px; /* 或者您希望的填充量 */
}

/* 确保标签垂直居中 */
van-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 悬浮按钮的样式 */
.floating-action-button {
  position: fixed; /* 固定定位 */
  right: 20px; /* 距离右边20像素 */
  bottom: 20px; /* 距离底部20像素 */
  width: 50px; /* 宽度 */
  height: 50px; /* 高度 */
  background-color: #007bff; /* 按钮颜色 */
  color: white; /* 图标及文字颜色 */
  border-radius: 50%; /* 圆形按钮 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 阴影效果 */
  cursor: pointer; /* 鼠标悬停时的手型指针 */
  z-index: 1000; /* 确保按钮在最上层 */
}

.plus-icon {
  font-size: 24px; /* 加号的大小 */
  font-weight: bold; /* 加号的粗细 */
}

</style>
